import { Component, Prop, Vue, Emit, Watch } from 'vue-property-decorator'
import styles from './ApplyDetail.less'
import ImagePreview from '@/components/ImagePreview'
import DetailItem from '@/components/DetailItem'
import PdfViewDialog from '@/components/pdfViewDialog'

const formLabelWidth3: string = '48px'
const formLabelWidth4: string = '60px'
const formLabelWidth5: string = '84px'
const formLabelWidth8: string = '72px'
const formLabelWidth7: string = '122px'

const detailData = [
  {
    title: '用章机构基本信息',
    child: [
      {
        id: 'applyOrganizeName',
        label: '机构名称',
        content: '',
        labelWidth: formLabelWidth3,
      },
      {
        id: 'applyOrganizeType',
        label: '机构类型',
        content: '',
        labelWidth: formLabelWidth8,
      },
      {
        id: 'applyOrganizeLicenseType',
        label: '证照类型',
        content: '',
        labelWidth: formLabelWidth3,
      },
      {
        id: 'applyOrganizeLicenseNumber',
        label: '证照号码',
        content: '',
        labelWidth: formLabelWidth8,
        reminder: '',
      },
      // {
      //   id: "applyOrganizeLevel", label: "行政等级", content: "",
      //   labelWidth: formLabelWidth3 }
    ],
  },
  {
    title: '经办人基本信息',
    child: [
      {
        id: 'agentName',
        label: '经办人姓名',
        content: '',
        labelWidth: formLabelWidth4,
      },
      {
        id: 'agentMobileDes',
        label: '经办人手机号',
        content: '',
        labelWidth: formLabelWidth8,
      },
      {
        id: 'agentLicenseType',
        label: '经办人证件类型',
        content: '',
        labelWidth: formLabelWidth5,
      },
      {
        id: 'agentLicenseNumberDes',
        label: '经办人证件号',
        content: '',
        labelWidth: formLabelWidth8,
      },
    ],
  },
  {
    title: '申请印章信息',
    child: [
      {
        id: 'sealType',
        label: '印章类别',
        content: '',
        labelWidth: formLabelWidth3,
        tips:
          '组织机构的电子法定名称章需要上级主管部门审批，其他专用章（包括经济合同章、财务专用章等）。在名称式样上应与单位正式印章有所区别，经本单位领导批准后可以申请。',
      },
      {
        id: 'sealName',
        label: '印章名称',
        labelWidth: formLabelWidth8,
        content: '',
      },
      {
        id: 'sealUseType',
        label: '用章方式',
        labelWidth: formLabelWidth3,
        content: '',
        tips:
          '选择Ukey签章需要硬件介质UKey盖章，选择云签章可用于开放服务使用API调用。',
      },
    ],
  },
  {
    title: '上级审批机构',
    child: [
      {
        id: 'confirmOrganizeName',
        label: '机构名称',
        labelWidth: formLabelWidth3,
        content: '',
      },
      {
        id: 'confirmOrganizeLicenseType',
        label: '证照类型',
        labelWidth: formLabelWidth8,
        content: '',
      },
      {
        id: 'confirmOrganizeLicenseNumber',
        label: '证照号码',
        labelWidth: formLabelWidth3,
        content: '',
        reminder: '',
      },
    ],
  },
]

const orderInfo = [
  {
    title: '付款信息',
    child: [
      {
        id: 'orderNo',
        label: '订单编号',
        labelWidth: formLabelWidth7,
        content: '',
        // btnName: "查看订单",
      },
      {
        id: 'payOrderTime',
        label: '付款时间',
        labelWidth: formLabelWidth3,
        content: '',
      },
      {
        id: 'payType',
        label: '付款方式',
        single: true,
        labelWidth: formLabelWidth8,
        content: '',
      },
      {
        id: 'payer',
        label: '付款方',
        labelWidth: formLabelWidth8,
        content: '',
      },
      // {
      // 	id: "payAmount",
      // 	label: "应付款金额",
      // 	labelWidth: formLabelWidth8,
      // 	content: ""
      // }
    ],
  },
]

@Component({})
export default class ApplyDetail extends Vue {
  @Prop({ default: '详情' }) private title!: string
  @Prop({}) private data!: any
  @Prop({ default: false }) private visible!: boolean
  @Prop({ default: true }) private showTimeline!: boolean
  @Prop({ default: () => {} }) private defaultData!: any
  @Prop({ default: () => [] }) private sealOption!: any[]

  private detailData: any[] = []
  private imgVisible = false
  private orderInfo: any = {}
  private isPdf: boolean = false // 是否为pdf格式
  private pdfDialogVisible: boolean = false
  private pdfUrl: string = ''

  protected render(h: any) {
    return (
      <div class={styles.sealDetail}>
        <el-dialog
          title={this.title}
          custom-class="custom-dialog"
          width={'700px'}
          close-on-click-modal={false}
          close-on-press-escape={false}
          visible={this.visible}
          {...{
            on: { 'update:visible': this.visibleChange },
          }}
        >
          <el-form hide-required-asterisk class={styles.sealForm}>
            {this.detailData &&
              this.detailData.map((item: any, index: number) => (
                <DetailItem
                  class={styles.detailItem}
                  data={item.child}
                  title={item.title}
                />
              ))}
            <p class={styles.panel}>印章申请表</p>
            {this.defaultData && this.defaultData.sealApplyFileUrl && (
              <div
                class="thumbnail"
                onClick={() => {
                  if (this.isPdf) {
                    // pdf预览
                    this.showPdfDialog(this.defaultData.sealApplyFileUrl)
                  } else {
                    this.preview()
                  }
                }}
              >
                <div class="hover-blank">
                  <img src={require('@/assets/preview.png')} />
                </div>
                <img
                  style={{
                    width: this.isPdf && '27px',
                    height: this.isPdf && '25px',
                  }}
                  src={
                    this.isPdf
                      ? require('@/assets/pdf.png')
                      : this.defaultData.sealApplyFileUrl
                  }
                />
              </div>
            )}
            {this.defaultData &&
              this.defaultData.payAmount &&
              this.orderInfo && (
                <DetailItem
                  class={styles.detailItem}
                  data={this.orderInfo.child}
                  title={this.orderInfo.title}
                />
              )}
            {/* {this.showTimeline && this.defaultData && this.defaultData.sealApplyStatus !== 1 && (
							<OptionLine class={styles.optionLine} sealOption={this.sealOption} />
						)} */}
          </el-form>
          <div slot="footer">
            <el-button
              onClick={() => {
                this.$emit('visibleChange', false)
              }}
            >
              关闭
            </el-button>
          </div>
        </el-dialog>
        <ImagePreview
          visible={this.imgVisible}
          title="申请表预览"
          url={this.defaultData ? this.defaultData.sealApplyFileUrl : ''}
          onVisibleChange={(val: boolean) => {
            this.imgVisible = val
          }}
        />
        <PdfViewDialog
          dialogVisible={this.pdfDialogVisible}
          url={this.pdfUrl}
          {...{
            on: {
              'update:dialogVisible': (val: boolean) => {
                this.pdfDialogVisible = val
              },
            },
          }}
        />
      </div>
    )
  }

  private save(isSubmit: boolean) {
    console.log(isSubmit)
  }

  private preview() {
    this.imgVisible = true
  }

  private clickToOrder(id: any) {
    this.visibleChange(false)
    this.$router.push({
      name: 'myOrderList',
      params: { type: 'all' },
      query: { orderNo: !!id ? id : undefined },
    })
  }

  private showPdfDialog(url: string) {
    this.pdfDialogVisible = true
    this.pdfUrl = url
  }

  @Emit('visibleChange')
  private visibleChange(val: boolean) {
    return val
  }

  @Watch('visible')
  private visibleHandler(val: boolean) {
    if (val) {
      this.isPdf = this.defaultData.sealApplyFileKeyType === 'pdf'
      detailData.forEach((detail: any) => {
        detail.child.forEach((item: any) => {
          if (item.reminder !== undefined) {
            if (
              item.id === 'confirmOrganizeLicenseNumber' &&
              this.defaultData.confirmOrganizeUuid ===
                this.defaultData.applyOrganizeUuid
            ) {
              item.reminder = this.defaultData.licenseNumberFileKey
            }
            if (item.id === 'applyOrganizeLicenseNumber') {
              item.reminder = this.defaultData.licenseNumberFileKey
            }
          }
          item.content = this.defaultData[item.id]
        })
      })
      // const index = ["自付费", "统一付费"].indexOf(this.defaultData["payType"]);
      // if (index > -1) {
      orderInfo[0].child.forEach((item: any) => {
        item.content = this.defaultData[item.id]
        if (!!item.btnName) {
          item.onClick = this.clickToOrder
        }
      })
      this.orderInfo = { ...orderInfo[0] }

      // } else {
      // 	this.orderInfo = null;
      // }
      this.detailData = detailData
    }
  }
}
